import React, { Component } from 'react'

export default class Prize extends Component {
  state = {
    list: [
      { id: 1, name: "xiaowang" },
      { id: 2, name: "xiaozhang" },
      { id: 3, name: "xiaowu" },
      { id: 4, name: "xiaoliu" },
      { id: 5, name: "xiaomei" },
      { id: 6, name: "xiaoqing" },
      { id: 7, name: "xiaolizi" },
      { id: 8, name: "xiaofeiwaer" },
      { id: 9, name: "xiaonai" },
      { id: 10, name: "xiaolan" },
      { id: 11, name: "xiaolv" },
      { id: 12, name: "xiaoneng" },
    ],
    prize: []
  }
  choujiang = () => {
    this.timmer = setInterval(() => {
      this.getMingdan()
    }, 300);
  }
  pause = ()=>{
    clearInterval(this.timmer)
  }
  getMingdan() {
    const { list } = this.state
    const newarray = []
    while (newarray.length < 4) {
      let index = parseInt(Math.random() * list.length)
      if (newarray.indexOf(list[index]) == -1) {
        newarray.push(list[index])
      }
    }
    this.setState({
      prize: newarray
    },()=>{
      console.log(this.state.prize);
    })
  }
  render() {
    return (
      <div>
        <div>
          {this.state.prize.map(item=>{
            return <p key={item.id}>{item.name}</p>
          })}
        </div>
        <button onClick={this.choujiang}>抽奖开始</button>
        <button onClick={this.pause}>抽奖暂停</button>
      </div>
    )
  }
}
